<template>
    <!-- options 传参获得图片展示方式，水平还是垂直等 -->
    <swiper :options="swiperOption" :key="keyId">
        <slot></slot>
        <div class="swiper-pagination" v-if="pagination" slot="pagination"></div>
        <!-- 这种方式不方便扩展，幻灯片可能不只包含图片，可能还会有按钮等 -->
        <!-- <swiper-slide v-for="item in sliders" :key="item.index">
            <a href="">
                <img src="" alt="">
            </a>
        </swiper-slide> -->
    </swiper>
</template>

<script>
  // 引入swiper组件
  import {swiper} from 'vue-awesome-swiper';

  export default{
    name: 'MeSlider',
    components: {
      swiper
    },
    props: {
      direction: {
        type: String,
        default: 'horizontal',
        // 校验，传入的值必须是水平或垂直
        vaildator(value) {
          return [
            'horizontal', // 水平
            'vertical' // 垂直
          ].indexOf(value) > -1;
        }
      },
      // 自动轮播
      interval: {
        type: Number,
        default: 3000,
        validator(value) {
          return value >= 0;
        }
      },
      // 判断 布尔值
      loop: {
        type: Boolean,
        default: true // 默认开启
      },
      // 分页器
      pagination: {
        type: Boolean,
        default: true // 默认开启
      },
      data: {
        type: Array,
        default() {
          return [];
        }
      }
    },
    data() {
      // 对于组件，数据data一定是一个函数返回一个对象,
      // 复用的时候就不会是同一分数据，保持数据独立性
      return {
        // 解决无缝滚动造成的bug
        keyId: Math.random()
      };
    },
    watch: {
      data(newData) {
        if (newData.length === 0) {
          return;
        }

        this.swiperOption.loop = newData.length === 1 ? false : this.loop;
        this.keyId = Math.random();
      }
    },
    created() {
      this.init();
    },
    methods: {
      init() {
        this.swiperOption = {
          watchOverflow: true, // 只有一张图片的时候，左右切换会失效
          direction: this.direction,
          autoplay: this.interval ? { // 自动播放
            delay: this.interval, // 延迟
            disableOnInteraction: false // 有交互的时候，(false不)停止自动轮播
          } : false, // 如果判断不为真，不开启自动轮播
          slidesPerView: 1, // 设置slider 容器同时能够显示的slides数量
          // 判断张数再决定是否开无缝滚动，只有1张的时候不开启滚动
          loop: this.data.length <= 1 ? false : this.loop,
          // loop: this.loop, // 是否开启无缝滚动
          // 查找分页器元素el的class属性，如果没有就为null
          // todo 分页器出不来 小圆点
          pagination: {
            el: this.pagination ? '.swiper-pagination' : null
          }
        }
      }
    }
  };
</script>

<style scoped>
  .swiper-container {
    width: 100%;
    height: 100%;
  }
</style>
